<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短驾自租</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../css/shortrent.shortrent.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="js/vue2.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>

<div id="app">
    <div data-v-67ef3a4a class="csdheader">
        <div data-v-67ef3a4a class="layout clear">
            <div data-v-67ef3a4a class="left csdnav" id="daohang">
                <label data-v-67ef3a4a v-if="weidenglu">
                    <a data-v-67ef3a4a href="../pagehome/login.html" class="colorRed" >登录</a>
                    <a data-v-67ef3a4a href="" class="colorRed">/</a>
                    <a data-v-67ef3a4a href="../pagehome/register.html" class="colorRed" style="margin-right: 10px;">注册</a>
                </label>

                <label data-v-67ef3a4a v-if="denglu">
                    <a data-v-67ef3a4a href="#">你好，</a>
                    <a data-v-67ef3a4a href="#" class="colorRed">/</a>
                    <a data-v-67ef3a4a href="../pagehome/index.html" class="colorRed" style="margin-right: 10px;">[退出]</a>
                </label>
                <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
                <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
            </div>
            <div data-v-67ef3a4a="" class="right phone">
                <div data-v-67ef3a4a="" class="typeTab">
                    <a data-v-67ef3a4a="" href="index.html" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                    <a data-v-67ef3a4a="" href="../en/index.html">English</a>
                </div>
                <div data-v-67ef3a4a="" class="menu">
                    <a data-v-67ef3a4a="" href="../mymain/mymain.html">我的车速递</a>
                </div>
                <div data-v-67ef3a4a="">
                    <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                    <span data-v-67ef3a4a="">400-919-8000</span>
                </div>
            </div>

        </div>
    </div>
    <div data-v-39f7f629 class="csdnav">
        <div data-v-39f7f629="" class="layout clear">
            <div data-v-39f7f629="" class="left logo">
                <a data-v-39f7f629="" href="index.html">
                    <img data-v-39f7f629="" src="">
                </a>
            </div>
            <div data-v-39f7f629="" class="left navCom">
                <ul data-v-39f7f629="">
                    <li data-v-39f7f629="" >

                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self" >优惠活动</a>
                    </li>

                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank" class="">网约车</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                    </li>
                    <li data-v-39f7f629="">
                        <a data-v-39f7f629="" href="index.html" target="_self" >
                            <span data-v-39f7f629="">首页</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="chooseCar">

            <div class="chooseCarL">
                <form action="" onsubmit="return false;">
                <div class="choose-get item">

                    <span class="itemTitle-red left">取&nbsp&nbsp车&nbsp&nbsp地&nbsp&nbsp址</span>
                    <div id="sel"  v-cloak>
                        <select  id="dqsel" v-model="qcCityID" @change="change1"><!-- @change="getCity(cityId)" v-model="cityId"-->
                            <option value="0">请选择</option>
                            <option v-for="mc in mcs" :value="mc.id">{{mc.name}}</option>
                        </select>

                        <select id="bmsel" v-model="qcCityID2">
                            <option value="0">请选择</option>
                            <option v-for="city in citys" :value="city.id">{{city.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="choose-return item">
                    <span class="itemTitle-red left">还&nbsp&nbsp车&nbsp&nbsp地&nbsp&nbsp址</span>
                    <div id="seltwo"  v-cloak>
                        <select id="hcc" v-model="hccVal" @change="change2">
                            <option value="0">请选择</option>
                            <option v-for="mc in mcs" :value="mc.id">{{mc.name}}</option>
                        </select>

                        <select id="hcs" v-model="hcsVal">
                            <option value="0">请选择</option>
                            <option v-for="city in citys" :value="city.id">{{city.name}}</option>
                        </select>
                    </div>
                </div>
                </form>
            </div>
        <div class="chooseCarR">
            <button class="goChooseCar" onclick="selectCar()" >去选车</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    /*前端发送视图请求,并携带参数*/
    function selectCar(){
        var getid = bmsel.qcCityID2;    //取车id
        var backid = hcs.hcsVal;        //还车id
        window.location.href="shortsort?getid="+getid+"&backid="+backid     //跳转到选车页面
    }
</script>
<script type="text/javascript">
    //取车地址
    var dqsel = new Vue({
        el:'#dqsel',
        data:{
            qcCityID:0,
            mcs:[
                {id:1,name:'北京'},
                {id:2,name:'西安'},
                {id:3,name:'兰州'},
            ]
        },
        methods:{
            change1:function(){
                axios.get("getCity/"+this.qcCityID)
                    .then(function(res){
                        console.log(res.data);
                        bmsel.citys = res.data;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
            }
        }
    });
    //还车绑定
    var hcc = new Vue({
        el:'#hcc',
        data:{
            hccVal:0,
            mcs:[
                {id:1,name:'北京'},
                {id:2,name:'西安'},
                {id:3,name:'兰州'},
            ]
        },
        methods:{
            change2:function (){
                axios.get("getCity/"+this.hccVal)
                    .then(function (res){
                        console.log(res.data);
                        hcs.citys = res.data;
                    })
                    .catch(function (error){
                        console.log(error);
                    })
            }
        }
    });
    var bmsel = new Vue({
        el:'#bmsel',
        data:{
            qcCityID2:0,
            citys:[]
        }
    });
    var hcs = new Vue({
        el:'#hcs',
        data:{
            hcsVal:0,
            citys:[]
        }
    });
    window.onload = function (){
        axios.get("getCity/"+0)
            .then(function (res){
                console.log(res);
                dqsel.mcs = res.data;
                hcc.mcs = res.data;
            })
            .catch(function (error){
                console.log(res);
            });
    }
</script>
</html>